<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>添加商品分类</title>
  <link rel="stylesheet" href="__STATIC__/admin/lib/layui-v2.5.4/css/layui.css" media="all">
  <link rel="stylesheet" href="__STATIC__/admin/css/public.css" media="all">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>商品分类管理</legend>
</fieldset>

<form class="layui-form" action="">

  <div class="layui-form-item">
    <label for="" class="layui-form-label" style="width:200px">排序</label>
    <div class="layui-input-inline">
      <input type="text" class="layui-input" value="{$data.listorder}" name="listorder">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label" style="width: 200px;">父级分类</label>
      <div class="layui-input-inline">
        <select name="pid" id="classif"></select>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" style="width: 200px;">栏目名称</label>
    <div class="layui-input-inline">
      <input type="text" name="name" lay-verify="required|name" autocomplete="off" placeholder="请输入栏目名称"
             class="layui-input" value="{$data.name}">
    </div>
  </div>

  <div class="layui-form-item">
    <label for="" class="layui-form-label" style="width:200px;">图标</label>
    <div class="layui-input-inline">
      <input type="text" name="icon" placeholder="" class="layui-input" value="{$data.icon}">
    </div>
    <div class="layui-form-mid layui-word-aux">
      <a href="https://www.layui.com/doc/element/icon.html" target="_blank" >字体图标</a>
    </div>
  </div>

  <div class="layui-form-item">
    <label for="" class="layui-form-label" style="width:200px;">页面类型</label>
    <div class="layui-input-block">
      <input type="radio" name="type" lay-filter="changeType" value="1" title="主菜单" {if $data.type == 1}checked{/if}>
      <input type="radio" name="type" lay-filter="changeType" value="2" title="页面" {if $data.type == 2}checked{/if}>
      <input type="radio" name="type" lay-filter="changeType" value="3" title="弹窗" {if $data.type == 3}checked{/if}>
      <input type="radio" name="type" lay-filter="changeType" value="4" title="ajax" {if $data.type == 4}checked{/if}>
    </div>
  </div>

  <div class="layui-form-item" id="tp_module">
    <label for="" class="layui-form-label" style="width:200px">模块</label>
    <div class="layui-input-inline">
      <input type="text" class="layui-input" name="module" value="{$data.module}">
    </div>
  </div>

  <div class="layui-form-item" id="tp_action">
    <label for="" class="layui-form-label" style="width:200px">方法</label>
    <div class="layui-input-inline">
      <input type="text" class="layui-input" name="action" value="{$data.action}">
    </div>
  </div>

  <div class="layui-form-item">
    <label for="" class="layui-form-label" style="width:200px;">左侧栏目显示</label>
    <div class="layui-input-block">
      <input type="radio" name="is_show" value="1" title="是" {if $data.is_show == 1}checked{/if}>
      <input type="radio" name="is_show" value="0" title="否" {if $data.is_show == 0}checked{/if}>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label" style="width: 200px;"></label>
    <div class="layui-input-inline">
      <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">立即提交</button>
    </div>
  </div>
</form>
<script src="__STATIC__/admin/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="__STATIC__/admin/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="__STATIC__/admin/js/common.js" charset="utf-8"></script>
<script>
  layui.use(['form','laypage'], function () {
    var form = layui.form;

    function _classif(res=[]) {
      // res 分类数据 先期模拟
      let temps = '<option value="0">-| 顶级菜单</option>';

      var pid  = {$data.pid};
      var data = {$module|raw};
      let toTrees = toTree(data);
      for (let item of toTrees) {
        temps += `<optgroup  data-id="${item["id"]}">`;
        if (pid == `${item['id']}`) {
          temps += `<option  data-id="${item['id']}" value="${item['id']}" selected>-| ${item["name"]}</option>`
        } else {
          temps += `<option  data-id="${item['id']}" value="${item['id']}">-| ${item["name"]}</option>`
        }
        if (item['children'] && item['children'].length > 0) {
          for (let child of item['children']) {
            if (pid == `${child['id']}`) {
              temps += `<option  data-id="${child['id']}" value="${child['id']}" selected> &nbsp;&nbsp;&nbsp;--| ${child["name"]} </option>`
            } else {
              temps += `<option  data-id="${child['id']}" value="${child['id']}"> &nbsp;&nbsp;&nbsp;--| ${child["name"]} </option>`
            }
          }
        }
        temps += `</optgroup>`;
      }
      $('#classif').html(temps)
      form.render('select');
    }


    function queryClassif() { // 请求分类 后端接口
      let url = '';
      layObj.get(url,function (res) {
        console.log(res)
      }); // 封装的ajax
      _classif()
    }
    queryClassif(); // 获取后端分类数据

    form.on('radio(changeType)', function(data){
      $("#tp_module").css('display', data.value == 1 ? 'none' : 'block');
      $("#tp_action").css('display', data.value == 1 ? 'none' : 'block');
    });

    //监听提交
    form.on('submit(demo1)', function (data) {
      formdata = data.field
      if (formdata.type != 1) {
        if (formdata.module == '') {
          layer.msg('模块不可为空');
          return false;
        }
        if (formdata.action == '') {
          layer.msg('方法不可为空');
          return false;
        }
      }
      $.ajax({
        type: 'POST',
        data: formdata,
        url: '/admin/module/update?id=' + {$data.id},
        success(res) {
          if (res.status == 1) {
            layer.msg('栏目修改成功', function (){
              // 父级页面刷新
              parent.location.reload();
              // 获取父级页面索引
              var index = parent.layer.getFrameIndex(window.name);
              // 关闭当前弹框
              parent.layer.close(index);
            })
          } else {
            layer.msg(res.message)
            return false;
          }
        },
        error(res) {
          console.log(res);
        }
      })

      return false;
    });

  })
</script>
</body>
</html>
